<!DOCTYPE html>
<html>
<head>
  <meta content="IE=11.0000" http-equiv="X-Ua-Compatible">
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
  <title>消纳场统计</title>
  <!--region 引入公用js和css -->
  <link href="../assets/plugins/animate/animate.css" rel="stylesheet">
  <link href="../assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/base/css/components.css" rel="stylesheet" id="style_components" type="text/css"/>
  <link href="../assets/base/css/plugins.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/ditop/layout.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet" type="text/css"/>
  <link href="../assets/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
  <link href="../assets/plugins/bootstrap-table/extensions/tree-column/bootstrap-table-tree-column.css" rel="stylesheet">
  <link href="../assets/plugins/bootstrap-toastr/toastr.css" rel="stylesheet">
  <link rel="stylesheet" href="../assets/plugins/sweetalert/sweetalert.css">
  <link rel="stylesheet" href="../assets/plugins/layer/theme/default/layer.css">
  <link href="../assets/plugins/select2/css/select2.min.css" rel="stylesheet">
  <link href="../assets/plugins/icheck/skins/flat/aero.css" rel="stylesheet">
  <link href="../assets/ditop/ditop.css" rel="stylesheet">
  <link href="../assets/ditop/style/ztree/style9/treestyle.css" rel="stylesheet">
  <link href="../assets/plugins/bootstrap-touchspin/bootstrap.touchspin.css" rel="stylesheet">
  <link href="../assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css"/>
  <script src="../assets/plugins/jquery/jquery.min.js"></script>
  <script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
  <script src="../assets/plugins/bootstrap-toastr/toastr.js"></script>
  <script src="../assets/plugins/art-template/template.js"></script>
  <!--<script src="assets/plugins/layer/layer.js"></script>-->
  <script src="../assets/ditop/ditop.js"></script>
  <!--endregion-->

  <link href="../assets/module/gcjsy/css/public.css" rel="stylesheet">
 <!--The world has kissed my soul with its pain, asking for its return in songs.-->

  <style>
    .DataPanel {
      border-bottom: 1px solid #F0F0F0;
    }
    .DataPanel-item{
      border-bottom: none;
      display: inline-block;
    }
    .DataPanel-item1{
      width: 400px;
    }
    .DataPanel-item2{
      width: 300px;
    }
    .DataPanel-item3{
      width: 300px;
    }
    .ring{
      width: 16px;
      height: 16px;
      display: inline-block;
      border: 3px solid #737983;
      border-radius: 50%!important;
    }
    .circle {
      width: 16px;
      height: 16px;
      overflow: hidden;
      border-radius: 50%!important;
      position: relative;
      display: inline-block;
    }

    .circle-left {
      width: 50%;
      height: 100%;
      background: #A9ADB3;
      transform-origin: 100% 50%;
      position: absolute;
      left: 0;
      z-index: 0;
    }

    .circle-right {
      width: 50%;
      height: 100%;
      background: #A9ADB3;
      transition: transform 1s linear;
      transform-origin: 0% 50%;
      position: absolute;
      right: 0;
      z-index: 2;
    }

    .circle-bottom-left {
      width: 50%;
      height: 100%;
      background:#1F7DEE;
      position: absolute;
      left: 0;
      z-index: -1;
    }
    .circle-bottom-right {
      width: 50%;
      height: 100%;
      background: #1F7DEE;
      position: absolute;
      right: 0;
      z-index: 1;
    }
    .info-mask {
      width: 10px;
      height: 10px;
      position: absolute;
      z-index: 9;
      background:#fff;
      top: 3px;
      left: 3px;
      border-radius: 50%!important;
    }
    @media screen and (max-width: 1366px) {
      .DataPanel-item {
        padding: 22px 15px;
      }
    }

  </style>
</head>

<body class="min1280">

<div class="ztc-wrapper">

  <div class="head-wrapper flex-s">
    <div class="logo">
        <a href="#">
        <img src="../assets/images/logo2.png" alt="">
        <span>合肥市建筑垃圾运输管理子系统</span>
      </a>
    </div>
    <div class="logo-right text-right pull-right">
      <span class="logo-rb">欢迎你，合肥市城管局   闫肖建</span>

      <a class="head-ic" id="message" href="#"><i class="dtFont dtFont-xiaoxi"></i><small>999</small></a>
      <a class="head-ic" href="#"><i class="dtFont dtFont-shezhimima1"></i></a>
      <a class="head-ic" href="#"><i class="dtFont dtFont-tuichudenglu"></i></a>

      <div class="tip-banner none" style="display: none;">
        <h3>待办消息</h3>
        <ul class="tip-banner-list">
          <li>
            <a href="#" class="clearfix">
              <i class="dtFont dtFont-zizhi"></i> 资质业务
              <small>999</small>
            </a>
          </li>
          <li>
            <a href="#" class="clearfix">
              <i class="dtFont dtFont-zhunyunzheng"></i> 单车准运证
              <small>14</small>
            </a>
          </li>
          <li>
            <a href="#" class="clearfix">
              <i class="dtFont dtFont-cheliang"></i> 车辆业务
              <small>154</small>
            </a>
          </li>
          <li>
            <a href="#" class="clearfix">
              <i class="dtFont dtFont-gongdi"></i> 建筑工地建档
              <small>154</small>
            </a>
          </li>
          <li>
            <a href="#" class="clearfix">
              <i class="dtFont dtFont-xiaonachang"></i> 消纳场建档
              <small>4</small>
            </a>
          </li>
          <li>
            <a href="#" class="clearfix">
              <i class="dtFont dtFont-alert"></i> 报警信息管理
              <small>154</small>
            </a>
          </li>
          <li>
            <a href="#" class="clearfix">
              <i class="dtFont dtFont-weigui"></i> 违规信息确认
              <small>2</small>
            </a>
          </li>

        </ul>
      </div>

      <script>
          $('#message').click(function () {
              $('.tip-banner').toggle()
          });
      </script>

    </div>




    <div class="slide-nav">
      <ul class="slide-nav-list ">
        <li class="slide-nav-list-item active">
          <a href="#">
            <i class="dtFont dtFont-ditu1"></i>
            <p>智慧监管</p>
          </a>
        </li>
        <li class="slide-nav-list-item">
          <a href="#">
            <i class="dtFont dtFont-yewuchuli"></i>
            <p>业务处理</p>
          </a>
        </li>
        <li class="slide-nav-list-item">
          <a href="#">
            <i class="dtFont dtFont-gongdiguanli"></i>
            <p>工地管理</p>
          </a>
        </li>
        <li class="slide-nav-list-item">
          <a href="#">
            <i class="dtFont dtFont-ziliaocundang"></i>
            <p>档案管理</p>
          </a>
        </li>
        <li class="slide-nav-list-item">
          <a href="#">
            <i class="dtFont dtFont-zan"></i>
            <p>信用评价</p>
          </a>
        </li>
        <li class="slide-nav-list-item">
          <a href="#">
            <i class="dtFont dtFont-ziliaocundang"></i>
            <p>资料存档</p>
          </a>
        </li>
        <li class="slide-nav-list-item">
          <a href="#">
            <i class="dtFont dtFont-lingxingjianzhulaji"></i>
            <p>零星建筑垃圾</p>
          </a>
        </li>
        <li class="slide-nav-list-item">
          <a href="#">
            <i class="dtFont dtFont-tongjichaxun"></i>
            <p>统计查询</p>
          </a>
        </li>
        <li class="slide-nav-list-item">
          <a href="#">
            <i class="dtFont dtFont-yonghu"></i>
            <p>用户管理</p>
          </a>
        </li>
      </ul>

      <div class="slide-box-c text-center">
        <div class="slide-close">
          <i></i>
          <span>收起</span>
        </div>
      </div>




    </div>
  </div>

  <div class="body-wrapper">



    <div class="page-sidebar-wrapper pull-left" id="leftSec">

      <div class="pageIcon">
        <div class="center">
          <img src="../assets/images/index2.png" alt="">
        </div>
        <p class="fmAx16">用户管理</p>
      </div>
      <div class="page-sidebar navbar-collapse collapse">
        <div class="left-menu">
          <ul class="page-sidebar-menu page-header-fixed" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
            <li class="nav-item active">
              <a href="#" class="nav-link nav-toggle">
                <i class="fa fa-building-o"></i><span class="title">工地管理</span>
              </a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link nav-toggle">
                <i class="fa fa-building-o"></i><span class="title">工地清运数据</span>
              </a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link nav-toggle">
                <i class="fa fa-building-o"></i><span class="title">工地验收预约</span>
              </a>
            </li>
          </ul>


        </div>
      </div>
    </div>

    <div class="main-content-wrapper pull-right">
      <div class="main-content-scroll ">
        <div class="crumbs padding-lr-16">
          <a href="#">首页</a> / <a href="#">业务处理</a> /  文件通知管理
        </div>
        <div class="main-content-box bg-white flex-s" style="height: calc(100% - 47px)">


          <div class="h-100p auto-scroll w100">

            <div class="padding-lr-16">
              <div class="clearfix padding-top-10 margin-bottom-5">
                <h3 class="title2 pull-left">消纳场统计数据</h3>
                <p class="font-xs pull-left margin-left-10 padding-top-10">
                  <span style="color: #B2B2B2;">更新时间：04-09  08:35</span>
                  <span class="blue pointer margin-left-10">刷新数据 <i class="dtFont dtFont-refresh inline-block top1 font-md"></i></span>
                </p>
              </div>
              <ul class="DataPanel clearfix">



                <li class="DataPanel-item DataPanel-item1" style="padding-left: 0">
                  <p class="DataPanel-name">全市消纳场总数</p>
                  <p class="DataPanel-num">
                    <i class="dtFont dtFont-quanbu"></i> <span>弃土场数</span> 16
                    <i class="dtFont dtFont-quanbu" style="margin-left: 80px"></i> <span>回填点数</span> 256

                  </p>



                  <div class="District-detail">
                    <span class="District-title">区属详情 <i class="dtFont dtFont-xiala"></i></span>
                    <div class="District-box" style="width: 300px">
                      <i class="District-close dtFont dtFont-guanbi"></i>
                      <table class="gray w100">
                        <tr>
                          <td>庐阳区</td>
                          <td>弃土场数 <span class="black">0</span></td>
                          <td>回填点数 <span class="black">0</span></td>
                        </tr>
                        <tr>
                          <td>庐阳区</td>
                          <td>弃土场数 <span class="black">0</span></td>
                          <td>回填点数 <span class="black">0</span></td>
                        </tr>
                        <tr>
                          <td>庐阳区</td>
                          <td>弃土场数 <span class="black">0</span></td>
                          <td>回填点数 <span class="black">0</span></td>
                        </tr>
                        <tr>
                          <td>庐阳区</td>
                          <td>弃土场数 <span class="black">0</span></td>
                          <td>回填点数 <span class="black">0</span></td>
                        </tr>
                        <tr>
                          <td>庐阳区</td>
                          <td>弃土场数 <span class="black">0</span></td>
                          <td>回填点数 <span class="black">0</span></td>
                        </tr>
                        <tr>
                          <td>庐阳区</td>
                          <td>弃土场数 <span class="black">0</span></td>
                          <td>回填点数 <span class="black">0</span></td>
                        </tr>
                        <tr>
                          <td>庐阳区</td>
                          <td>弃土场数 <span class="black">0</span></td>
                          <td>回填点数 <span class="black">0</span></td>
                        </tr>
                        <tr>
                          <td>庐阳区</td>
                          <td>弃土场数 <span class="black">0</span></td>
                          <td>回填点数 <span class="black">0</span></td>
                        </tr>
                      </table>

                    </div>
                  </div>
                </li>
                <li class="DataPanel-item DataPanel-item2" >
                  <p class="DataPanel-name">备案消纳场总量（万方）</p>
                  <p class="DataPanel-num"><i class="ring top1"></i> 913305</p>

                </li>

                <li class="DataPanel-item noBr DataPanel-item3">
                  <p class="DataPanel-name">剩余可消纳量（万方）</p>
                  <div class="DataPanel-num ">
                    <div class="circle top1">
                      <div class="circle-left"></div>
                      <div class="circle-right"></div>
                      <div class="circle-bottom-left"></div>
                      <div class="circle-bottom-right"></div>
                      <div class="info-mask"></div>
                    </div>
                    <p class="DataPanel-num blue inline-block">161616</p>
                  </div>

                </li>


              </ul>
            </div>

            <div class="list-wrap padding-lr-16">
              <div class="filter padding-top-20 clearfix">
                <button class="pull-left normal-button sure" style="margin-top: 0px">导出数据</button>

                <div class="pull-right clearfix">
                  <select class="form-control fiSub-select pull-left margin-right-15">
                    <option>全部</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                    <option>Option 4</option>
                    <option>Option 5</option>
                  </select>

                  <div class="search-box pull-right">
                    <input type="text"  class="form-control" placeholder="请输入企业名称或统一社会信用代码">
                    <button type="button" class="normal-button sure">查询</button>
                  </div>
                </div>
              </div>

              <div class="filter-box padding-top-20">
                <div class="table-scrollable">
                  <table class="table table-hover table-light">
                    <thead>
                    <tr>
                      <th class="text-center">
                        <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                          <input type="checkbox">
                          <span></span>
                        </label>
                      </th>
                      <th class="text-center"> 序号 </th>
                      <th> 企业名称 </th>
                      <th> 统一社会信用代码 </th>
                      <th> 所属区划 </th>
                      <th> 企业联系人 </th>
                      <th> 联系人手机 </th>
                      <th> 建筑垃圾运输许可证号 </th>
                      <th> 许可证有效期 </th>
                      <th> 企业状态 </th>
                      <th> 操作 </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                      <td class="text-center">
                        <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                          <input type="checkbox">
                          <span></span>
                        </label>
                      </td>
                      <td class="text-center">1</td>
                      <td>安徽徳拓渣土车运输有限公司</td>
                      <td>91340100581541779T</td>
                      <td>庐阳区</td>
                      <td>朱俊海</td>
                      <td>13188888888</td>
                      <td>合城管运资第2020002号</td>
                      <td>2020/9/1~2021/8/31</td>
                      <td>正常运行</td>
                      <td><a href="#" class="blue">查看</a></td>
                    </tr>
                    <tr>
                      <td class="text-center">
                        <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                          <input type="checkbox">
                          <span></span>
                        </label>
                      </td>
                      <td class="text-center">2</td>
                      <td>安徽徳拓渣土车运输有限公司</td>
                      <td>91340100581541779T</td>
                      <td>庐阳区</td>
                      <td>朱俊海</td>
                      <td>13188888888</td>
                      <td>合城管运资第2020002号</td>
                      <td>2020/9/1~2021/8/31</td>
                      <td><span class="orange">资质过期</span></td>
                      <td><a href="#" class="blue">查看</a></td>
                    </tr>
                    <tr>
                      <td class="text-center">
                        <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                          <input type="checkbox">
                          <span></span>
                        </label>
                      </td>
                      <td class="text-center">3</td>
                      <td>安徽徳拓渣土车运输有限公司</td>
                      <td>91340100581541779T</td>
                      <td>庐阳区</td>
                      <td>朱俊海</td>
                      <td>13188888888</td>
                      <td>合城管运资第2020002号</td>
                      <td>2020/9/1~2021/8/31</td>
                      <td><span class="red">停业整改</span></td>
                      <td><a href="#" class="blue">查看</a></td>
                    </tr>
                    <tr>
                      <td class="text-center">
                        <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                          <input type="checkbox">
                          <span></span>
                        </label>
                      </td>
                      <td class="text-center">1</td>
                      <td>安徽徳拓渣土车运输有限公司</td>
                      <td>91340100581541779T</td>
                      <td>庐阳区</td>
                      <td>朱俊海</td>
                      <td>13188888888</td>
                      <td>合城管运资第2020002号</td>
                      <td>2020/9/1~2021/8/31</td>
                      <td>正常运行</td>
                      <td><a href="#" class="blue">查看</a></td>
                    </tr>
                    <tr>
                      <td class="text-center">
                        <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                          <input type="checkbox">
                          <span></span>
                        </label>
                      </td>
                      <td class="text-center">2</td>
                      <td>安徽徳拓渣土车运输有限公司</td>
                      <td>91340100581541779T</td>
                      <td>庐阳区</td>
                      <td>朱俊海</td>
                      <td>13188888888</td>
                      <td>合城管运资第2020002号</td>
                      <td>2020/9/1~2021/8/31</td>
                      <td><span class="orange">资质过期</span></td>
                      <td><a href="#" class="blue">查看</a></td>
                    </tr>
                    <tr>
                      <td class="text-center">
                        <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                          <input type="checkbox">
                          <span></span>
                        </label>
                      </td>
                      <td class="text-center">3</td>
                      <td>安徽徳拓渣土车运输有限公司</td>
                      <td>91340100581541779T</td>
                      <td>庐阳区</td>
                      <td>朱俊海</td>
                      <td>13188888888</td>
                      <td>合城管运资第2020002号</td>
                      <td>2020/9/1~2021/8/31</td>
                      <td><span class="red">停业整改</span></td>
                      <td><a href="#" class="blue">查看</a></td>
                    </tr>
                    <tr>
                      <td class="text-center">
                        <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                          <input type="checkbox">
                          <span></span>
                        </label>
                      </td>
                      <td class="text-center">1</td>
                      <td>安徽徳拓渣土车运输有限公司</td>
                      <td>91340100581541779T</td>
                      <td>庐阳区</td>
                      <td>朱俊海</td>
                      <td>13188888888</td>
                      <td>合城管运资第2020002号</td>
                      <td>2020/9/1~2021/8/31</td>
                      <td>正常运行</td>
                      <td><a href="#" class="blue">查看</a></td>
                    </tr>
                    <tr>
                      <td class="text-center">
                        <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                          <input type="checkbox">
                          <span></span>
                        </label>
                      </td>
                      <td class="text-center">2</td>
                      <td>安徽徳拓渣土车运输有限公司</td>
                      <td>91340100581541779T</td>
                      <td>庐阳区</td>
                      <td>朱俊海</td>
                      <td>13188888888</td>
                      <td>合城管运资第2020002号</td>
                      <td>2020/9/1~2021/8/31</td>
                      <td><span class="orange">资质过期</span></td>
                      <td><a href="#" class="blue">查看</a></td>
                    </tr>
                    <tr>
                      <td class="text-center">
                        <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                          <input type="checkbox">
                          <span></span>
                        </label>
                      </td>
                      <td class="text-center">3</td>
                      <td>安徽徳拓渣土车运输有限公司</td>
                      <td>91340100581541779T</td>
                      <td>庐阳区</td>
                      <td>朱俊海</td>
                      <td>13188888888</td>
                      <td>合城管运资第2020002号</td>
                      <td>2020/9/1~2021/8/31</td>
                      <td><span class="red">停业整改</span></td>
                      <td><a href="#" class="blue">查看</a></td>
                    </tr>
                    </tbody>
                  </table>
                </div>
                <div class="wrap-fenYe margin-top-40 padding-bottom-20">
                  <div class="pagebar">
                    <div class="paginfo flex-s w100">
                      <span>每页
                        <select>
                          <option value="10" selected="selected">10</option>
                          <option value="20">20</option>
                          <option value="50">50</option>
                          <option value="100">100</option>
                        </select>
                        条，共 2 页，16 条记录
                      </span>
                      <span>
                        <a href="javascript:;" data-page="1">首页</a>
                        <a href="javascript:;" class="prev">上一页</a>
                        <span class="active">1</span>
                        <a href="javascript:;" class="next">下一页</a>
                        <a href="javascript:;" data-page="2">尾页</a>
                        <span class="turn-to">
                          转到<input type="text" class="jump-ipt">页
                        </span>
                        <a href="javascript:;" class="jump-btn">确定</a>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>


          </div>


        </div>
      </div>
    </div>

  </div>



</div>



<!--region 引入公用js和css -->
<script src="../assets/plugins/sweetalert/sweetalert.min.js"></script>
<script src="../assets/plugins/jquery.blockui.min.js"></script>
<script src="../assets/plugins/js.cookie.min.js"></script>
<script src="../assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="../assets/plugins/jquery.blockui.min.js"></script>
<script src="../assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="../assets/plugins/bootstrap-touchspin/bootstrap.touchspin.js"></script>
<script src="../assets/plugins/moment.min.js"></script>
<script src="../assets/plugins/bootstrap-daterangepicker/daterangepicker.min.js"></script>
<script src="../assets/plugins/counterup/jquery.waypoints.min.js"></script>
<script src="../assets/plugins/counterup/jquery.counterup.min.js"></script>
<script src="../assets/plugins/fullcalendar/fullcalendar.js"></script>
<script src="../assets/plugins/horizontal-timeline/horizontal-timeline.js"></script>
<script src="../assets/plugins/jquery.sparkline.min.js"></script>
<script src="../assets/plugins/select2/js/select2.js"></script>
<script src="../assets/plugins/select2/js/i18n/zh-CN.js"></script>
<script src="../assets/plugins/ztree/jquery.ztree.all.js"></script>
<script src="../assets/plugins/jquery-form/jquery.form.js"></script>
<script src="../assets/plugins/jquery-validator/jquery.placeholder.min.js"></script>
<script src="../assets/plugins/jquery-validator/jquery.validate.js"></script>
<script src="../assets/plugins/jquery-validator/jquery.validate.custom.js"></script>
<script src="../assets/plugins/jquery-validator/localization/messages_zh.js"></script>
<script src="../assets/plugins/jquery-validator/additional-methods.js"></script>
<script src="../assets/plugins/bootstrap-growl/jquery.bootstrap-growl.js"></script>
<script src="../assets/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="../assets/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="../assets/plugins/bootstrap-table/extensions/tree-column/bootstrap-table-tree-column.js"></script>
<script src="../assets/base/scripts/app.js"></script>
<script src="../assets/base/scripts/theme.js"></script>
<script src="../assets/ditop/ditop-addition.js"></script>
<script src="../assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<script src="../assets/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"
        type="text/javascript"></script>
<script type="text/javascript" src="../assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"
        charset="UTF-8"></script>
<script type="text/javascript"
        src="../assets/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
        charset="UTF-8"></script>
<script src="../assets/plugins/jquery-validator/jquery.validate.custom.js"></script>
<script src="../assets/ditop/layout.js"></script>
<!--endregion-->

<script src="../assets/module/gcjsy/js/content.js"></script>


<script src="../assets/module/gcjsy/js/calendar.js"></script>


<script>


    function drawRing ( blue ,total){ //蓝色区域代表的金额和总金额
        var percent = blue / total;
        var circle = document.getElementsByClassName('circle')[0];
        var right = document.getElementsByClassName('circle-right')[0];
        var left = document.getElementsByClassName('circle-left')[0];
        circle.title = ((Math.round((percent * 10000)))/100.00).toFixed(2) + '%';
        if (percent <= 0.5) {  //红色区域不超过一半
            right.style.transform = `rotate(${percent * 360}deg)`
        } else {    //红色区域超过一半的情况，重点部分
            right.style.transform = `rotate(180deg)`;
            right.style.transition = `opacity 0s step-end 1s, transform 1s linear`; //timing-function需要设为linear来达到视觉上的平缓过渡
            right.style.opacity = 0;

            left.style.transition = `transform ${(percent - 0.5) / 0.5}s linear 1s`;
            left.style.transform = `rotate(${percent * 360 - 180}deg)`
        }
    }

    window.onload = function () {
        var blue = 2506, total = 5000 ;
        drawRing ( blue ,total)
    }
</script>
</body>
</html>
